<template>
  <div class="ze-upload">
    <div class="trigger" @click="handleTrigger">
      <div class="label">
        {{ label }}
      </div>
      <image src="@/static/icons/upload-image.png" class="icon" />
    </div>

    <!-- 如果只传图片，展示图片预览 -->
    <div v-if="imgOnly && value.length" class="img-list">
      <template v-for="url in value">
        <image
          :key="url"
          class="file-item"
          mode="aspectFit"
          :src="url"
          @click="handlePreview(url)"
        />
      </template>
      <div class="trigger-btn" @click="handleTrigger">
        <van-icon name="photograph" />
      </div>
    </div>

    <!-- 否则展示文件列表 -->
    <div v-else-if="value.length" class="file-list">
      <div v-for="(item, idx) in value" :key="item.tempId" class="file-item">
        <span class="filename">{{ item.filename }}</span>
        <van-icon name="delete-o" size="18px" color="#ff4757" @click="handleDelete(idx)" />
      </div>
    </div>

    <!-- 抽屉弹窗，选择图片或者文件 -->
    <van-popup
      v-if="!imgOnly"
      position="bottom"
      :show="popupVisible"
      @close="popupVisible = false"
    >
      <div class="file-type-picker">
        <div class="item" @click="handleImage">
          <div class="icon">
            <van-icon name="photo" size="24px" />
          </div>
          <span class="text">照片</span>
        </div>
        <div class="item" @click="handleFile">
          <div class="icon">
            <van-icon name="description" size="24px" />
          </div>
          <span class="text">文件</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { chooseAndUploadFiles, chooseAndUploadImages } from '@/utils/upload'
import { showConfirm } from '@/utils/common'

export default {
  name: 'ZeUpload',
  props: {
    label: { type: String, default: '' },
    accept: { type: Array, default: () => ['pdf', 'jpg', 'jpeg', 'pdf', 'docx', 'doc', 'xls', 'xlsx'] },
    value: { type: Array, default: () => [] },
    imgOnly: { type: Boolean, default: true },
  },
  data() {
    return {
      popupVisible: false,
    }
  },
  methods: {
    async handleTrigger() {
      if (this.imgOnly) {
        // 上传图片
        this.handleImage()
      } else {
        // 处理文件的情况，弹出抽屉让用户选择是图片还是文件
        // this.popupVisible = true
        this.handleFile()
      }
    },
    handlePreview(url) {
      uni.previewImage({
        urls: this.value,
        current: url,
      })
    },
    async handleImage() {
      this.popupVisible = false
      const res = await chooseAndUploadImages()
      if (res) {
        this.$emit('input', this.value.concat(res))
      }
    },
    async handleFile() {
      this.popupVisible = false
      const res = await chooseAndUploadFiles(this.accept)
      if (res) {
        this.$emit('input', this.value.concat(res))
      }
    },
    handleDelete(idx) {
      showConfirm('确定删除吗？').then(() => {
        const arr = [...this.value]
        arr.splice(idx, 1)
        this.$emit('input', arr)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.ze-upload {
  .trigger {
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    padding: 15px 18px 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .label {
      color: #333333;
    }

    .icon {
      width: 16px;
      height: 16px;
    }
  }

  .img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .file-item,
    .trigger-btn {
      width: 60px;
      height: 60px;
    }

    .trigger-btn {
      background-color: #f7f8fa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #666;
    }
  }

  .file-type-picker {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 30px;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 10px;

      .icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
      }

      .text {
        font-size: 12px;
      }
    }
  }

  .file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 18px 4px 0;

    .filename {
      max-width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #007aff;
    }
  }
}
</style>
